<template>
	<view>
		<view class="">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect(index)">
						{{item.name}} {{item.total>0?'（'+item.total+'人）':'（0）'}}
					</view>
				</view>
			</scroll-view>
		</view>
		<scroll-view scroll-y :style="'height:calc(100vh - '+ barHeight +'px);'">
			<template v-if="0==TabCur">
				<!--
				<view class="cu-list menu-avatar padding">
					<view class="cu-item" :key="index" v-for="(item,index) in list.oneLevelList">
						<view class="cu-avatar round lg" :style="[{ backgroundImage:'url(' + item.headPortrait + ')'}]"></view>
						<view class="content">
							<view class="text-grey">{{item.userName}}</view>
						</view>
					</view>
				</view>
				-->
				<view class="padding bg-white margin-sm" :key="index" v-for="(item,index) in list.oneLevelList">
					<view class="flex">
						<view class="flex-sub">
							账号：{{ formatPhone(item.userName) }}
						</view>
						<view class="flex-sub text-right text-gray">
							{{ formatTm(item.creTm) }}
						</view>
					</view>
					<view class="padding-top text-gray text-sm">
						二级人数：{{item.secondNum}}
					</view>
				</view>
			</template>
			<template v-else>
				<view class="padding bg-white margin-sm flex" :key="index" v-for="(item,index) in list.secondLevelList">
					<view class="flex-sub">
						账号：{{ formatPhone(item.userName) }}
					</view>
					<view class="flex-sub text-right text-gray">
						{{ formatTm(item.creTm) }}
					</view>
				</view>
				<!--
				<view class="cu-list menu-avatar padding">
					<view class="cu-item" :key="index" v-for="(item,index) in list.secondLevelList">
						<view class="cu-avatar round lg" :style="[{ backgroundImage:'url(' + item.headPortrait + ')'}]"></view>
						<view class="content">
							<view class="text-grey">{{item.userName}}</view>
						</view>
					</view>
				</view>
				-->
			</template>
			<view v-if="isLoad" class="cu-load text-gray loading"></view>
			 <view v-else-if="tabs[TabCur].total==0" class="pos-center text-center text-gray">
				<text class="cuIcon-activityfill" style="font-size: 30px;"></text>
				<view class="">
					暂无数据
				</view>
			</view> 
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{name: '一级', type: '1', total: 0}, 
					{name: '二级', type: '0', total: 0}
				],
				TabCur: 0,
				barHeight: 100,
				queryData: {
					currPage: 1,
					pageSize: 500
				},
				list: {
					oneLevelList:[],
					secondLevelList:[]
				},
				// isLoad:false
			}
		},

		onLoad(option) {
			this.barHeight = this.StatusBar + 100;
			this.getList();
		},
		methods: {
			tabSelect(index) {
				this.TabCur = index;
			},
			// 滑动 change
			swipChange(e){
				this.TabCur = e.detail.current;
			},
			formatTm(tmstr){
				let year = tmstr.substring(2, 4) + '年';
				let month = tmstr.substring(5, 7) + '月';
				let day = tmstr.substring(8, 10) + '日 ';
				let tm = tmstr.substring(11, 16);
				return year + month + day + tm;
			},
			formatPhone(phone){
				return phone.substring(0, 4) + '****' + phone.substring(8, 11);
			},
			// 请求列表
			getList: function(obj){
				this.isLoad = true;
				let _this = this;
				setTimeout(()=>{
					let _url = 'api/driver/user/team';
					this.baseRequest(_url, 'GET', this.queryData, (res)=>{
						
						if(res){
							_this.list = res;
							_this.tabs[0].total = res.oneLevelList.length;
							_this.tabs[1].total = res.secondLevelList.length;
							console.log(_this.tabs[_this.TabCur])
						}
						_this.isLoad = false;
						_this.showRefresh = false;
					});
				}, 500);
			}
		}
	}
</script>